<!-- src/views/FishboneDiagram.vue -->
<template>
  <div class="fishbone-container">
    <!-- 使用 Vue Flow 创建鱼骨图 -->
    <VueFlow
      :nodes="nodes"
      :edges="edges"
      :nodeTypes="nodeTypes"
      :edgeTypes="edgeTypes"
      panOnScroll
      fitView
      @node-click="handleNodeClick"
    >
      <!-- 自定义节点样式 -->
      <template #node-default="{ node, selected }">
        <div
          class="custom-node"
          :class="{ 'selected': selected }"
          :style="{ width: '120px', height: '60px' }"
        >
          <div class="node-content">
            {{ node.data.label }}
          </div>
        </div>
      </template>

      <!-- 自定义边样式 -->
      <template #edge-default="{ edge }">
        <path
          :d="getEdgePath(edge)"
          stroke="#333"
          stroke-width="2"
          fill="none"
          marker-end="url(#arrow)"
        />
      </template>

      <!-- 箭头标记 -->
      <defs>
        <marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto" markerUnits="strokeWidth">
          <path d="M0,0 L10,10 M10,0 L0,10" fill="#333" />
        </marker>
      </defs>
    </VueFlow>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { VueFlow, Node, Edge } from '@vue-flow/core';
import request from '@/utils/request';

// 定义节点类型
const nodeTypes = {
  default: {
    component: 'default',
    style: {
      backgroundColor: '#fff',
      border: '2px solid #333',
      borderRadius: '8px',
      padding: '10px',
      cursor: 'pointer'
    }
  }
};

// 定义边类型
const edgeTypes = {
  default: {
    component: 'default',
    style: {
      stroke: '#333',
      strokeWidth: 2,
      markerEnd: 'url(#arrow)'
    }
  }
};

export default {
  name: 'FishboneDiagram',
  components: {
    VueFlow
  },
  setup() {
    // 节点数据
    const nodes = ref([
      // 鱼头（起点）
      {
        id: 'start',
        type: 'default',
        position: { x: 50, y: 300 },
        data: { label: '开始' },
        style: {
          backgroundColor: '#409eff',
          color: 'white',
          fontWeight: 'bold',
          borderRadius: '50%'
        }
      },

      // 主要节点
      {
        id: 'basicInfo',
        type: 'default',
        position: { x: 200, y: 300 },
        data: { label: '基本信息' },
        style: {
          backgroundColor: '#f5f7fa',
          borderColor: '#333'
        }
      },
      {
        id: 'propertyInfo',
        type: 'default',
        position: { x: 350, y: 300 },
        data: { label: '财产信息' },
        style: {
          backgroundColor: '#f5f7fa',
          borderColor: '#333'
        }
      },
      {
        id: 'taxInfo',
        type: 'default',
        position: { x: 500, y: 300 },
        data: { label: '税务信息' },
        style: {
          backgroundColor: '#f5f7fa',
          borderColor: '#333'
        }
      },
      {
        id: 'creditInfo',
        type: 'default',
        position: { x: 650, y: 300 },
        data: { label: '信用信息' },
        style: {
          backgroundColor: '#f5f7fa',
          borderColor: '#333'
        }
      },
      {
        id: 'relatedInfo',
        type: 'default',
        position: { x: 800, y: 300 },
        data: { label: '关联信息' },
        style: {
          backgroundColor: '#f5f7fa',
          borderColor: '#333'
        }
      },

      // 子节点 - 基本信息
      {
        id: 'companyInfo',
        type: 'default',
        position: { x: 200, y: 200 },
        data: { label: '工商信息' },
        style: {
          backgroundColor: '#fff',
          borderColor: '#ccc',
          fontSize: '12px'
        }
      },
      {
        id: 'shareholderInfo',
        type: 'default',
        position: { x: 200, y: 250 },
        data: { label: '股东信息' },
        style: {
          backgroundColor: '#fff',
          borderColor: '#ccc',
          fontSize: '12px'
        }
      },

      // 子节点 - 财产信息
      {
        id: 'vehicleInfo',
        type: 'default',
        position: { x: 350, y: 200 },
        data: { label: '车辆信息' },
        style: {
          backgroundColor: '#fff',
          borderColor: '#ccc',
          fontSize: '12px'
        }
      },
      {
        id: 'propertyInfoDetail',
        type: 'default',
        position: { x: 350, y: 250 },
        data: { label: '房产信息' },
        style: {
          backgroundColor: '#fff',
          borderColor: '#ccc',
          fontSize: '12px'
        }
      },
      {
        id: 'bankCardInfo',
        type: 'default',
        position: { x: 350, y: 300 },
        data: { label: '银行卡信息' },
        style: {
          backgroundColor: '#fff',
          borderColor: '#ccc',
          fontSize: '12px'
        }
      },
      {
        id: 'otherAssets',
        type: 'default',
        position: { x: 350, y: 350 },
        data: { label: '其他财产' },
        style: {
          backgroundColor: '#fff',
          borderColor: '#ccc',
          fontSize: '12px'
        }
      },

      // 子节点 - 税务信息
      {
        id: 'taxQualification',
        type: 'default',
        position: { x: 500, y: 250 },
        data: { label: '纳税资质' },
        style: {
          backgroundColor: '#fff',
          borderColor: '#ccc',
          fontSize: '12px'
        }
      },
      {
        id: 'taxInfoDetail',
        type: 'default',
        position: { x: 500, y: 300 },
        data: { label: '纳税信息' },
        style: {
          backgroundColor: '#fff',
          borderColor: '#ccc',
          fontSize: '12px'
        }
      },

      // 子节点 - 信用信息
      {
        id: 'creditInfoDetail',
        type: 'default',
        position: { x: 650, y: 250 },
        data: { label: '失信信息' },
        style: {
          backgroundColor: '#fff',
          borderColor: '#ccc',
          fontSize: '12px'
        }
      },
      {
        id: 'executedToBankruptcy',
        type: 'default',
        position: { x: 650, y: 300 },
        data: { label: '执转破' },
        style: {
          backgroundColor: '#fff',
          borderColor: '#ccc',
          fontSize: '12px'
        }
      },

      // 子节点 - 关联信息
      {
        id: 'relatedCases',
        type: 'default',
        position: { x: 800, y: 250 },
        data: { label: '关联案件' },
        style: {
          backgroundColor: '#fff',
          borderColor: '#ccc',
          fontSize: '12px'
        }
      },
      {
        id: 'relatedCompanies',
        type: 'default',
        position: { x: 800, y: 300 },
        data: { label: '关联企业' },
        style: {
          backgroundColor: '#fff',
          borderColor: '#ccc',
          fontSize: '12px'
        }
      },
      {
        id: 'relatedAssets',
        type: 'default',
        position: { x: 800, y: 350 },
        data: { label: '关联财产' },
        style: {
          backgroundColor: '#fff',
          borderColor: '#ccc',
          fontSize: '12px'
        }
      },

      // 鱼尾（终点）
      {
        id: 'end',
        type: 'default',
        position: { x: 950, y: 300 },
        data: { label: '结束' },
        style: {
          backgroundColor: '#409eff',
          color: 'white',
          fontWeight: 'bold',
          borderRadius: '50%'
        }
      }
    ]);

    // 边数据
    const edges = ref([
      // 主干连接
      { id: 'start-basicInfo', source: 'start', target: 'basicInfo', type: 'default' },
      { id: 'basicInfo-propertyInfo', source: 'basicInfo', target: 'propertyInfo', type: 'default' },
      { id: 'propertyInfo-taxInfo', source: 'propertyInfo', target: 'taxInfo', type: 'default' },
      { id: 'taxInfo-creditInfo', source: 'taxInfo', target: 'creditInfo', type: 'default' },
      { id: 'creditInfo-relatedInfo', source: 'creditInfo', target: 'relatedInfo', type: 'default' },
      { id: 'relatedInfo-end', source: 'relatedInfo', target: 'end', type: 'default' },

      // 子节点连接
      { id: 'basicInfo-companyInfo', source: 'basicInfo', target: 'companyInfo', type: 'default' },
      { id: 'basicInfo-shareholderInfo', source: 'basicInfo', target: 'shareholderInfo', type: 'default' },

      { id: 'propertyInfo-vehicleInfo', source: 'propertyInfo', target: 'vehicleInfo', type: 'default' },
      { id: 'propertyInfo-propertyInfoDetail', source: 'propertyInfo', target: 'propertyInfoDetail', type: 'default' },
      { id: 'propertyInfo-bankCardInfo', source: 'propertyInfo', target: 'bankCardInfo', type: 'default' },
      { id: 'propertyInfo-otherAssets', source: 'propertyInfo', target: 'otherAssets', type: 'default' },

      { id: 'taxInfo-taxQualification', source: 'taxInfo', target: 'taxQualification', type: 'default' },
      { id: 'taxInfo-taxInfoDetail', source: 'taxInfo', target: 'taxInfoDetail', type: 'default' },

      { id: 'creditInfo-creditInfoDetail', source: 'creditInfo', target: 'creditInfoDetail', type: 'default' },
      { id: 'creditInfo-executedToBankruptcy', source: 'creditInfo', target: 'executedToBankruptcy', type: 'default' },

      { id: 'relatedInfo-relatedCases', source: 'relatedInfo', target: 'relatedCases', type: 'default' },
      { id: 'relatedInfo-relatedCompanies', source: 'relatedInfo', target: 'relatedCompanies', type: 'default' },
      { id: 'relatedInfo-relatedAssets', source: 'relatedInfo', target: 'relatedAssets', type: 'default' }
    ]);

    // 获取边路径
    const getEdgePath = (edge) => {
      const sourceNode = nodes.value.find(n => n.id === edge.source);
      const targetNode = nodes.value.find(n => n.id === edge.target);

      if (!sourceNode || !targetNode) return '';

      const sourceX = sourceNode.position.x + 60;
      const sourceY = sourceNode.position.y + 30;
      const targetX = targetNode.position.x + 60;
      const targetY = targetNode.position.y + 30;

      // 计算中间点
      const midX = (sourceX + targetX) / 2;
      const midY = (sourceY + targetY) / 2;

      // 创建贝塞尔曲线
      return `M ${sourceX} ${sourceY} C ${midX} ${sourceY}, ${midX} ${targetY}, ${targetX} ${targetY}`;
    };

    // 处理节点点击
    const handleNodeClick = (event, node) => {
      console.log('Clicked node:', node.id);
      // 可以在这里添加点击节点的处理逻辑
    };

    // 加载数据
    const load = () => {
      request.post('/relatedPeople/all', {
        executor: '测试',
        phone: '13800138000'
      })
        .then(response => {
          const result = response.data;

          // 更新节点数据
          nodes.value.forEach(node => {
            if (node.id === 'companyInfo') {
              node.data.label = result.companyInfo || '工商信息';
            }
            if (node.id === 'shareholderInfo') {
              node.data.label = result.shareholderInfo || '股东信息';
            }
            if (node.id === 'vehicleInfo') {
              node.data.label = result.vehicleInfo || '车辆信息';
            }
            if (node.id === 'propertyInfoDetail') {
              node.data.label = result.propertyInfo || '房产信息';
            }
            if (node.id === 'bankCardInfo') {
              node.data.label = result.bankCardInfo || '银行卡信息';
            }
            if (node.id === 'otherAssets') {
              node.data.label = result.otherAssets || '其他财产';
            }
            if (node.id === 'taxQualification') {
              node.data.label = result.taxQualification || '纳税资质';
            }
            if (node.id === 'taxInfoDetail') {
              node.data.label = result.taxInfo || '纳税信息';
            }
            if (node.id === 'creditInfoDetail') {
              node.data.label = result.creditInfo || '失信信息';
            }
            if (node.id === 'executedToBankruptcy') {
              node.data.label = result.executedToBankruptcy || '执转破';
            }
            if (node.id === 'relatedCases') {
              node.data.label = result.relatedCases || '关联案件';
            }
            if (node.id === 'relatedCompanies') {
              node.data.label = result.relatedCompanies || '关联企业';
            }
            if (node.id === 'relatedAssets') {
              node.data.label = result.relatedAssets || '关联财产';
            }
          });
        })
        .catch(err => {
          console.error('加载失败:', err);
        });
    };

    // 页面加载时初始化
    onMounted(() => {
      load();
    });

    return {
      nodes,
      edges,
      nodeTypes,
      edgeTypes,
      getEdgePath,
      handleNodeClick,
      load
    };
  }
};
</script>

<style scoped>
.fishbone-container {
  width: 100%;
  height: 80vh;
  position: relative;
  background-color: #f9f9f9;
  padding: 20px;
  font-family: 'Microsoft YaHei', sans-serif;
}

/* Vue Flow 样式 */
.vue-flow {
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

/* 自定义节点样式 */
.custom-node {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  border: 2px solid #333;
  background-color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.custom-node.selected {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.node-content {
  font-size: 12px;
  color: #333;
  font-weight: normal;
}

/* 边样式 */
.edge-path {
  stroke: #333;
  stroke-width: 2;
  fill: none;
}
</style>
